<template>
  <div class="m_pr video_list">
    <!-- 视频列表 -->
    <van-swipe ref="mySwipe" style="height: calc(100vh - 55px);" vertical  @change="onChange"
    :loop="false" :show-indicators="false" :initial-swipe="initIndex">
      <van-swipe-item v-for="item in list" :key="item.id">
        <video-item ref="videos" :liked="isLiked(item.id)" :collected="isCollected(item.id)" 
          :item="item" @clickToolBar="todo"></video-item>
      </van-swipe-item>
    </van-swipe>

    <!-- 选择视频文件分享 -->
    <input type="file" ref="videoFile" accept="video/*" @change="doShare">
    
    <!-- 评论弹出框 -->
    <van-popup v-model="showComment" round position="bottom" :style="{ height: '70%' }">
      <comment-list :video="currentVideo" @hideCommnet="hideCommnet"></comment-list>
    </van-popup>
  </div>
</template> 

<script>
import { mapGetters, mapMutations} from 'vuex'
import VideoItem from '@/components/VideoItem.vue'
import CommentList from '@/components/CommentList.vue'
export default {
  name: 'VideoList',
  components: {
    VideoItem, CommentList
  },
  props: {
    list: {type:Array},
    initIndex: {type:Number, default:0},
    current:  {type:Number, default:0},
  },
  data(){
    return {
      showComment: false,
      currentVideo: {},
      videolikes: [],
      videocollects: []
    }
  },
  computed:{
    ...mapGetters('m_user',['isLogin']),
  },
  methods: {
    ...mapMutations('m_video',['setVideoFile']),
    // 当前index改变
    onChange(index) {
      this.$parent.current = index
      // 当前视频
      this.$refs.videos[index].play()
      this.$refs.videos[index].isPaused = false
      // 上一个视频
      if(index-1>=0){
        this.$refs.videos[index-1].pause()
        this.$refs.videos[index-1].isPaused = true
      }
      // 下一个视频
      if(index+1<this.list.length){
        this.$refs.videos[index+1].pause()
        this.$refs.videos[index+1].isPaused = true
      }
    },
    // 是否赞过此视频
    isLiked(id){
      return this.videolikes.some(x=>x.videoId==id)
    },
    // 是否收藏过此视频
    isCollected(id){
      return this.videocollects.some(x=>x.videoId==id)
    },
    // 去做
    todo(params){
      // 评论
      if(params.option == 'comment'){
        this.showComment = true
        this.currentVideo = params.item
        return
      }
      // 作家主页
      if(params.option == 'avatar'){
        console.log(params);
        this.$router.push(`/author/${params.item.userId}`)
        return
      }
      if(!this.isLogin){
        this.$dialog.confirm({
          title: '温馨提示',
          message: '需要登录后才可以哦',
          confirmButtonText: '去登录',
          confirmButtonColor: '#008080',
        }).then(()=>{
          this.$router.push('/login')
        }).catch(()=>{})
        return
      }
      // 点赞
      if(params.option == 'like'){
        this.doLike(params.item, params.liked)
      }
      // 分享
      else if(params.option == 'share'){
        this.$refs.videoFile.click()
      }
      // 收藏
      else if(params.option == 'collect'){
        this.doCollect(params.item, params.collected)
      }
    },
    // 分享
    doShare(){
      this.setVideoFile(this.$refs.videoFile.files[0])
      this.$refs.videoFile.value = null
      this.$router.push('/publish')
    },
    // 点赞/取消点赞视频
    doLike(item,liked){
      // 原来赞过，现在取消点赞
      if(liked){
        this.axios.post(`unlike/video/${item.id}`).then(res=>{
          if(res.code==0){
            this.$parent.videos[this.current].likeCount--
            this.videolikes = this.videolikes.filter(x=>x.videoId != item.id)
            // this.setVideolikes(res.videoId)
          }
        })
      }
      // 原理未赞过，现在点赞
      else{
        this.axios.post(`like/video/${item.id}`).then(res=>{
          if(res.code==0){
            this.$parent.videos[this.current].likeCount++
            this.videolikes = [...res.dt,...this.videolikes]
          }
        })
      }
    },
    // 收藏/取消收藏视频
    doCollect(item,collected){
      // 原来收藏过，现在取消收藏
      if(collected){
        this.axios.post(`uncollect/video/${item.id}`).then(res=>{
          if(res.code==0){
            this.$parent.videos[this.current].collectCount--
            this.videocollects = this.videocollects.filter(x=>x.videoId != item.id)
          }
        })
      }
      // 原理未收藏过，现在收藏
      else{
        this.axios.post(`collect/video/${item.id}`).then(res=>{
          if(res.code==0){
            this.$parent.videos[this.current].collectCount++
            this.videocollects = [...res.dt,...this.videocollects]
          }
        })
      }
    },
    // 关闭评论
    hideCommnet(){
      this.showComment = !this.showComment
    },
    // 获取用户点赞视频
    getVideolikes(){
      axios.get('/like/videos').then(res=>{
        if(res.code===0){
          this.videolikes = res.dt
        }else{
          this.$toast('获取点赞记录失败')
        }
      })
    },
    // 获取用户收藏视频
    getVideocollects(){
      axios.get('/collect/videos').then(res=>{
        if(res.code===0){
          this.videocollects = res.dt
        }else{
          this.$toast('获取收藏记录失败')
        }
      })
    },
  },
  mounted(){
    if(this.isLogin){
      this.getVideolikes()
      this.getVideocollects()
    }
  },
  activated(){
    if(this.isLogin){
      this.getVideolikes()
      this.getVideocollects()
    }
    this.$refs.mySwipe.swipeTo(this.current,{immediate:true})
  }
}
</script>

<style lang="scss" scoped>
.video_list{
  .van-swipe{
    background: #000;
    color: #fff;
  }
}
</style>